<template>
  <div class="request-tab">
    <div class="flex-spb-center mb10">
      <ga-radio-group v-model="requestType" type="button" :options="options" @change="changeRequestType" />
      <div>
        <span v-show="requestType === 'exception'">

          <ga-select :options="exceptionTypes" style="width: 108px;margin-right: 8px;" allow-clear
            v-model="exceptionType" allow-search @change="changeExceptionType"></ga-select>
        </span>
        <ga-input-search v-show="requestType !== 'excepCall'" style="width: 240px;" allow-clear v-model="nameLike" />
      </div>
      <!-- <div>{{ getCompProps('full') }}</div> -->
    </div>
    <template v-if="requestType === 'full'">
      <FullTable v-bind="getCompProps('full')" />
    </template>
    <!-- <FullTable  v-bind="getCompProps('full')" /> -->
    <template v-else-if="requestType === 'exception'">
      <ExceptionTable v-bind="getCompProps('exception')" @on-click-item="showDetail"

        @on-turn-page="turnPage"
        @on-change-page-size="changePageSize"
        @on-change-exception-params="changeExceptionParams"
         />
    </template>
    <template v-else-if="requestType === 'excepCall'">
      <ExceptionCall v-bind="getCompProps('excepCall')" />
    </template>
    <ExceptionDetail :now-detail="nowDetail" :visible="detailVisible" :type="type" :maxSize="exceptionTotal"
      :list-params="exceptionListParams" @on-cancel="() => detailVisible = false" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import FullTable from './components/FullTable.vue';
import ExceptionTable from './components/ExceptionTable.vue';
import ExceptionCall from './components/ExceptionCall.vue';
import ExceptionDetail from './components/ExceptionDetail/ExceptionDetail.vue';
import { handleTableSearch } from '@/utils';
import useFullList from './useFullList';
import useExceptionList from './useExceptionList';
import { isEmpty, cloneDeep } from 'lodash'
import useExceptionDetail from './useExceptionDetail';
import { bus } from '@/utils/eventBus';
const props = defineProps({
  node: {
    type: Object,
    default: () => ({})
  },
  visible: {
    type: Boolean,
    default: false
  },
  pageType: String,
  type: String,
  srcNodes: {
    type: Array,
    default: () => []
  },
  queryTime: {
    type: Object,
    default: () => ({})
  },
  url: String
})

const requestType = ref('full')
const options = [{ label: '全量', value: 'full' }, { label: '异常请求', value: 'exception' }, { label: '异常系统调用', value: 'excepCall' }]
const nameLike = ref('')
const exceptionType = ref(null)
const exceptionTypes = [
  {
    value: 3,
    label: "错误请求",
  },
  {
    value: 4,
    label: "慢请求",
  },
  {
    value: 1,
    label: "建连失败",
  },
  {
    value: 5,
    label: "错慢请求",
  },
];
const pagination = reactive({
  page: 1,
  pageSize: 10
})
// const { from, to } = props.queryTime
const propsRef = toRefs(props)
console.log(propsRef, 'propsRef');

const { fullList, allFullList, allDataExceptCount, getFullData } = useFullList({ ...propsRef, onSearch })

const { exceptionList, exceptionListParams, exceptionTotal, getExceptionData, buildExceptionParams, changeExceptionTable,
  searchExceptionList } = useExceptionList({ ...propsRef, allDataExceptCount })
const { nowDetail, detailVisible, showDetail } = useExceptionDetail()
function onSearch(value) {
  if (requestType.value === "exception") {
    searchExceptionList(value, exceptionType);
  } else {
    let list = cloneDeep(allFullList.value);
    if (value) {
      list = handleTableSearch(list, value, "url", "dstPort");
    }
    fullList.value = (list);
  }
}
const changeRequestType = (value) => {
  nameLike.value = '';
  // exceptionType.value = value
  if (value === 'exception' && (exceptionListParams.value.contentKey || exceptionListParams.value.exceptionClass?.length)) {
    searchExceptionList('', null)
  } else {
    fullList.value = allFullList.value
  }
}
const changeExceptionType = value => {
  exceptionType.value = value
  searchExceptionList(nameLike.value, value)
}
const changeExceptionParams = ({orderFiled, isDesc}) => {
  // console.log(params, {...exceptionListParams.value, ...params});
  exceptionListParams.value.orderFiled = orderFiled;
  exceptionListParams.value.isDesc = isDesc
}
const getCompProps = (type) => {
  if (type === 'full') {
    return {
      data: fullList.value,
      pageType: props.pageType,
      type: props.type
    }
  } else if (type === 'exception') {

    return {
      data: exceptionList.value,
      pageType: props.pageType,
      type: props.type,
      total: exceptionTotal.value,
      exceptionParams: exceptionListParams.value
    }
  } else {
    const { queryTime, node, visible } = propsRef
    let { namespace, masterIp, workloadKind: type, workloadName: name, } = node.value
    const { source, kind } = node.value
    if (kind === 'edge') {
      [masterIp, namespace, type, name] = source.split('#')
    }
    return {
      masterIp,
      namespace,
      type,
      timeInfo: queryTime.value,
      name,
      visible: visible.value,
      total: exceptionTotal.value
    }
  }
}
const turnPage = (page) => {
  exceptionListParams.value.startPage = page
}
const changePageSize = (pageSize) => {
  exceptionListParams.value.size = pageSize
}
watch([() => props.node, () => props.queryTime, () => props.type], ([node, queryTime]) => {
  if (!isEmpty(node) && queryTime.from) {
    getFullData().then(() => {

      const exceptionParams = buildExceptionParams()
      exceptionParams.startPage = 1
      exceptionListParams.value = exceptionParams
      getExceptionData(exceptionParams, allDataExceptCount.value)
    })
  }
})

watch(() => props.url, (newV) => {
  if (newV) {
    requestType.value = 'full'
    nameLike.value = newV
    onSearch(newV, 'full')
  } else {
    nameLike.value = ''
  }
})
watch(exceptionListParams, (newV) => {
  // const exceptionParams = buildExceptionParams()
  // console.log('trigger change excep list params');

  getExceptionData(newV, allDataExceptCount.value)
}, {
  deep: true
})
onMounted(() => {
  if (!isEmpty(props.node) && props.queryTime.from) {
    getFullData().then(() => {

      const exceptionParams = buildExceptionParams()
      exceptionParams.startPage = 1
      exceptionListParams.value = exceptionParams
      getExceptionData(exceptionParams, allDataExceptCount.value)
    })
  }
  ['updateTopoNodeDetail', 'updateTopoEdgeDetail'].forEach((type) => {

    bus.on(type, () => {
      if (!isEmpty(props.node) && props.queryTime.from) {
      getFullData().then(() => {

        const exceptionParams = buildExceptionParams()
        exceptionParams.startPage = 1
        exceptionListParams.value = exceptionParams
        getExceptionData(exceptionParams, allDataExceptCount.value)
      })
    }
    })
  })

})
watch(() => props.visible, (newV) => {
  if (!newV) {
    const params = JSON.parse(JSON.stringify(exceptionListParams.value))
    delete params.contentKey
  }
})
</script>

<style scoped lang="scss"></style>
